<template>
    <div class="fxn-detail-info">
        <div class="info-title">
            <div class="title">跟进日志</div>
        </div>
        <div class="info-wrap fxn-margin-b-20" v-for="(item,index) in notesData" :key="index">
            <el-descriptions :column="3" border>
                <el-descriptions-item label="案件状态">{{$filter.formatData(item.lawcase_status,state)}}</el-descriptions-item>
                <el-descriptions-item label="跟进状态">{{$filter.formatData(item.follow_status,'follow_status')}}</el-descriptions-item>
                <el-descriptions-item label="耗时(小时)">{{item.hour}}</el-descriptions-item>
                <el-descriptions-item label="处理时间">{{$filter.dateTime(item.deal_time)}}</el-descriptions-item>
                <el-descriptions-item label="创建人">{{item.create_with}}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{$filter.dateTime(item.create_time,1)}}</el-descriptions-item>
                <el-descriptions-item label="法院通知">{{formatCourt(item.court_status)}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="1" border>
                <el-descriptions-item label="跟进详情">{{item.info}}</el-descriptions-item>
                <el-descriptions-item label="附件">
                    <span v-for="(list,key) in item.files" :key="key">
                        <i v-if="list.xext == 'jpg' || list.xext == 'png'" class="iconfont icon-picture fxn-ft-24" @click="handleFile(list.xurl)"></i>
                        <i v-if="list.xext == 'pdf'" class="iconfont icon-pdf fxn-ft-24" @click="handleFile(list.xurl)"></i>
                        <i v-if="list.xext == 'docx' || list.xext == 'xlsx' || list.xext == 'pptx'" class="iconfont icon-document fxn-ft-24" @click="handleFile(list.xurl)"></i>
                        <el-icon v-if="list.xext == 'rar' || list.xext == 'zip'" size="24" @click="handleFile(list.xurl)"><Files /></el-icon>
                    </span>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <el-empty v-if="notesData.length == 0" description="暂无数据" />
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        name: '',
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                count: 1,
                page: 1,
                perPage: 10,
                loading: false,
                notesData: [],

                state: router.currentRoute.value.query.type,
            })

            //获取跟进
            const getList = () => {
                state.loading = true;
                proxy.$http.get('/oa/Lawcase/notes',{
                    page: state.page,
                    perPage: state.perPage,
                    lawcase_id: router.currentRoute.value.query.id
                })
                .then(res=> {
                    state.loading = false;
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        state.count = data.count;
                        state.page = data.page;
                        state.perPage = data.perPage;
                        state.notesData = data.list;
                    }
                })
            }

            //打开附件
            const handleFile = (file) => {
                window.open(file);
            }

            //格式化法院通知
            const formatCourt = (item) => {
                let array = item.split(',');
                let court_notice = store.state.configAll.court_notice;
                //匹配相同的数据
                let b = court_notice.filter((item)=> {
                    if(array.indexOf(item.name) > -1){
                        return item.value
                    }
                })
                //格式化数据
                let arr = [];
                for(let key in b){
                    arr.push(b[key].value)
                }
                return String(arr)
            }
            
            //Dom加载
            onMounted(()=>{
                getList();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                getList,
                
                //组件方法
                handleFile,
                formatCourt,
            }

        },
    })
</script>

<style scoped>
    .fxn-detail-info{
        margin-top: 20px;
    }

    .fxn-detail-info .info-title{
        margin: 20px 0;
        overflow: hidden;
    }

    .fxn-detail-info .info-title .title{
        float: left;
        color: rgba(46, 60, 179, .9);
        font-weight: bold;
        text-indent: 12px;
        position: relative;
    }

    .fxn-detail-info .info-title .title::after{
        content: '';
        position: absolute;
        left: 0;
        top: 11px;
        width: 4px;
        height: 10px;
        background: rgba(46, 60, 179, .9);
    }

    .fxn-detail-info .info-title .btn{
        float: right;
    }

    .fxn-detail-info .info-wrap{
        overflow: hidden;
    }
</style>